<template>
	<view>
		<view class="top">
			<image src="../../static/index/aptitude.png" class="aptituteimg" mode="" />
			<view class="rate z-font-w z-font-32">{{ info.commentScore }}</view>
		</view>

		<view class="shopname z-padding-32 z-radius-16">
			<view>{{ info.name }}</view>
			<view class="sure z-margin-l-24 z-font-24 text_999 z-padding-lr-16 z-radius-18 z-flex-0 z-flex">已认证</view>
		</view>

		<view class="z-margin-32">
			<view>营业执照</view>
			<canvas id="canvas-box" class="licence" type="2d" :style="'width:' + canvasW + 'px'+'height:' + canvasH + 'px'"></canvas>
		</view>

		<view class="z-margin-32">
			<view>店铺介绍</view>
			<view class="text_999 z-margin-t-16 z-font-26">
				{{ info.intro }}
			</view>
		</view>
	</view>
</template>

<script>
import http from '../../utils/http';

export default {
	data() {
		return {
			info: '',
			shop_id: '',
			canvasW: '',
			canvasH: ''
		};
	},
	onLoad(options) {
	   this.shop_id = options.shop_id
	    this.getInfo()
	  },
	methods: {
		getInfo() {
		    http.get('shop/getsampleshop', {
		      id: this.shop_id,
		    }).then(res => {
		      this.info = res.data,
		      this.addWaterMark(util.cdn(res.data.license_image),'#canvas-box')
		    })
		  },
		  addWaterMark(url,view) {
		    let that = this
		    wx.getImageInfo({
		      src: url,
		      success:(response) => {
		        const imgW = response.width
		        const imgH = response.height
		        const SelectorQuery = wx.createSelectorQuery().in(that)
		        SelectorQuery.select(view).fields({
		          node: true,
		          size: true
		        })
		        SelectorQuery.exec((res) => {
		          const canvasBox = res[0].node
		          const canvasW = res[0].width
		          const canvasH = imgH / imgW * res[0].width
		          this.canvasW = canvasW
		          this.canvasH = canvasH
		          const ctx = canvasBox.getContext('2d')
		          const dpr = wx.getSystemInfoSync().pixelRatio
		          canvasBox.width = canvasW * dpr
		          canvasBox.height = canvasH * dpr
		          ctx.scale(dpr, dpr)
		          const img = canvasBox.createImage()
		          img.src = url
		          img.onload = () => {
		            ctx.clearRect(0, 0, canvasW, canvasH)
		            ctx.drawImage(img, 0, 0, canvasW, canvasH)
		            let watermark = uni.getStorageSync('config').user_name || 'AJAX家政';
		            let fontColor = "#ffffff";
		            let fontSize = 12;
		            let lineHeight = 30;
		            let watermarkWidth = watermark.length*12; 
		            let maxLength = canvasH > canvasW ? canvasH * 2 : canvasW;
		            ctx.save();
		            ctx.beginPath();
		            ctx.translate(canvasW / 2, -maxLength);
		            ctx.rotate(45 * Math.PI / 180);
		            let xNum = Math.ceil(maxLength * 2 / watermarkWidth);
		            let yNum = Math.ceil(maxLength * 2 / lineHeight);
		            for (let j = 0; j < yNum; j++) {
		              ctx.fillStyle = fontColor
		              ctx.font = `${fontSize}px serif`;
		              ctx.fillText(watermark, 0, lineHeight * j);
		              for (let i = 1; i < xNum; i++) {
		                ctx.fillStyle = fontColor
		                ctx.font = `${fontSize}px serif`;
		                ctx.fillText(watermark, watermarkWidth * i, lineHeight * j);
		              }
		            };
		            ctx.closePath()
		            ctx.restore()
		          }
		        })
		      },
		      fail:(e)=>{
		        console.log(e)
		      }
		    })
		  },
	}
};
</script>

<style>
/* service/aptitude/aptitude.wxss */
page {
	background-color: #fff;
}
.aptituteimg {
	width: 204rpx;
	height: 194rpx;
	position: absolute;
	top: 1rpx;
}
.top {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 190rpx;
}
.rate {
	color: var(--mainmoneycolor);
	position: relative;
	right: 5rpx;
}
.shopname {
	background-color: #f5f7f9;
	width: 686rpx;
	box-sizing: border-box;
	margin: 50rpx auto;
	display: flex;
	justify-content: space-between;
}
.sure {
	background-color: #fff;
	height: 56rpx;
}
.licence {
	margin: 32rpx auto;
}
</style>
